<template>
  <div class="companyEquipment blue-border">
    <div class="top">
      <div>
        <div class="title">三级仓库金额占比</div>
        <pieChart id="warehouseAmount" ref="warehouseAmount"></pieChart>
      </div>
      <div>
        <div class="title">设备与总金额占比</div>
        <pieChart id="equipmentAmount" ref="equipmentAmount"></pieChart>
      </div>
      <div>
        <div class="title">
          <span>设备月曲线图</span>
          <el-select v-model="value" placeholder="请选择" style="width:80px" size="mini">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </div>
        <lineChart ref="monthlySalesVolume"></lineChart>
      </div>
    </div>
    <div class="bottom">
      <tableBox :data="tableData"></tableBox>
    </div>
  </div>
</template>
<script>
import pieChart from './pieChart.vue'
import lineChart from './lineChart.vue'
import tableBox from '../../../cld/financeReportBINew/components/table-box.vue'

export default {
  components: { pieChart, lineChart, tableBox },
  data() {
    return {
      tableData: [
        [{ val: "序号" }, { val: "商品编号" }, { val: "商品名称" }, { val: "规格" }, { val: "品牌" }, { val: "库存数量" }, { val: "库存金额" }, { val: "销售数量" }, { val: "销售金额" }, { val: "购买数量" }, { val: "购买金额" }],
        [{ val: 1 }, { val: '手推洗地机' }, { val: 'M2' }, { val: '三才tri-leverl' }, { val: 38 }, { val: 208962 }, { val: 10 }, { val: 62485 }, { val: 10 }, { val: 62485 }, { val: 38 },],
        [{ val: 2 }, { val: '手推洗地机' }, { val: 'M2' }, { val: '三才tri-leverl' }, { val: 38 }, { val: 208962 }, { val: 10 }, { val: 62485 }, { val: 10 }, { val: 62485 }, { val: 38 },],
        [{ val: 3 }, { val: '手推洗地机' }, { val: 'M2' }, { val: '三才tri-leverl' }, { val: 38 }, { val: 208962 }, { val: 10 }, { val: 62485 }, { val: 10 }, { val: 62485 }, { val: 38 },],
        [{ val: 4 }, { val: '手推洗地机' }, { val: 'M2' }, { val: '三才tri-leverl' }, { val: 38 }, { val: 208962 }, { val: 10 }, { val: 62485 }, { val: 10 }, { val: 62485 }, { val: 38 },],
        [{ val: 5 }, { val: '手推洗地机' }, { val: 'M2' }, { val: '三才tri-leverl' }, { val: 38 }, { val: 208962 }, { val: 10 }, { val: 62485 }, { val: 10 }, { val: 62485 }, { val: 38 },],
        [{ val: 6 }, { val: '手推洗地机' }, { val: 'M2' }, { val: '三才tri-leverl' }, { val: 38 }, { val: 208962 }, { val: 10 }, { val: 62485 }, { val: 10 }, { val: 62485 }, { val: 38 },],
        [{ val: 7 }, { val: '手推洗地机' }, { val: 'M2' }, { val: '三才tri-leverl' }, { val: 38 }, { val: 208962 }, { val: 10 }, { val: 62485 }, { val: 10 }, { val: 62485 }, { val: 38 },],
        [{ val: 8 }, { val: '手推洗地机' }, { val: 'M2' }, { val: '三才tri-leverl' }, { val: 38 }, { val: 208962 }, { val: 10 }, { val: 62485 }, { val: 10 }, { val: 62485 }, { val: 38 },],
      ],
      options: [{ label: '销量', value: 1 }, { label: '金额', value: 2 }],
      value: 1
    }
  },
  mounted() {
    let data = [{ value: 1048, name: '公司' },
    { value: 735, name: '项目' },]
    this.$refs.warehouseAmount.initChart(data)
    this.$refs.equipmentAmount.initChart(data)
    this.getMonthlySalesVolume()
  },
  methods: {

    // 设备月销量
    getMonthlySalesVolume() {
      let legendData = { show: false, data: ['计划值', '实际值', '参考值'] }
      let xAxisData = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月',]
      let series = [
        {
          name: '参考值',
          type: 'line',
          data: [120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90],
          itemStyle: {
            normal: {
              color: "#004FFA", //改变折线点的颜色
              lineStyle: {
                color: "#004FFA", //改变折线颜色
              },
            },
          },
        },
        // {
        //   name: '计划值',
        //   type: 'line',
        //   data: [220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290],
        //   itemStyle: {
        //     normal: {
        //       color: "#19BDF9", //改变折线点的颜色
        //       lineStyle: {
        //         color: "#19BDF9", //改变折线颜色
        //       },
        //     },
        //   },
        // },
        // {
        //   name: '实际值',
        //   type: 'line',
        //   data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100],
        //   itemStyle: {
        //     normal: {
        //       color: "#FA9200", //改变折线点的颜色
        //       lineStyle: {
        //         color: "#FA9200", //改变折线颜色
        //       },
        //     },
        //   },
        // },
      ]
      this.$refs.monthlySalesVolume.initChart(legendData, xAxisData, series)
    }
  }

}
</script>
<style lang="scss" scoped>
@import '../../../cld/financeReportBINew/components/border.css';

.companyEquipment {
  width: 100%;
  height: 100%;
  padding: 25px 21px;
  display: flex;
  flex-direction: column;



  .top {
    display: flex;
    height: 45%;
    box-sizing: border-box;
    padding: 20px 20px;

    .title {
      font-weight: 400;
      font-size: 20px;
      color: #000000;
      text-align: center;
      margin-bottom: 10px;
      display: flex;
      justify-content: center;
      align-items: center;

      span {
        margin-right: 8px;
      }
    }

    >div:nth-child(1) {
      width: 26%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 0 30px;
    }

    >div:nth-child(2) {
      width: 34%;
      height: 100%;
      padding: 0 30px;
      border-left: 1px solid #DDDDDD;
      border-right: 1px solid #DDDDDD;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    >div:nth-child(3) {
      width: 40%;
      height: 100%;
      padding: 0 30px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
  }

  .bottom {
    flex-grow: 1;
    padding: 40px 0 0;
    box-sizing: border-box;

    >div {
      height: 100%;
    }
  }
}
</style>